<template>
  <div class="successful-case">
    <e-head></e-head>
    <div class="main-content">
      <router-info :current="routerInfo"></router-info>
      <div class="flex-container">
        <div class="flex-container-left">
          <div class="flex-left-title">{{ $t("lang.successfulCase") }}</div>
          <div class="flex-left-item-list">
            <div
              class="flex-left-item"
              v-for="(item, index) in mSuccessfulCase"
              :key="index"
              @click="detail(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="flex-container-right">
          <div class="flex-grid-list">
            <div
              class="flex-grid-list-item"
              v-for="(item, index) in mSuccessfulCase"
              :key="index"
              @click="detail(index)"
            >
              <a class="img-a">
                <img :src="item.img" alt="" />
              </a>
              <a>{{ item.name }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <e-foot></e-foot>
  </div>
</template>
<script>
import Ehead from "@/components/head.vue";
import Efoot from "@/components/foot.vue";
import RouterInfo from "@/components/router-info.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    "e-head": Ehead,
    "e-foot": Efoot,
    RouterInfo,
  },
  computed: {
    ...mapGetters(["successfulCase"]),
  },
  watch: {
    successfulCase: {
      handler: function (newValue) {
        this.mSuccessfulCase = newValue;
      },
    },
  },
  created() {
    this.mSuccessfulCase = this.successfulCase;
  },
  data() {
    return {
      mSuccessfulCase: [],
      attributes: [],
      lastAttr: null,
      routerInfo: [
        {
          name: "lang.home",
          route: "",
        },
        {
          name: "lang.successfulCase",
          route: "",
        },
      ],
    };
  },
  methods: {
    detail(e) {
      localStorage.setItem(
        "successful-case",
        JSON.stringify({
          current: e,
          data: this.mSuccessfulCase,
        })
      );
      this.$router.push(
        "/successful-case/detail/" + this.mSuccessfulCase[e].id
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.successful-case {
  .img-a {
    img {
      width: 248px;
      height: 154px;
    }
  }
}
</style>